<template>
  <div class="user-info-bar">
    <UserAvatar />
    <div class="user-details">
      <span class="user-name">{{ nickname }}</span>
      <span class="user-sect">{{ sectName }}</span>
    </div>
    <div class="currency-display">
      <div class="currency-item">
        <div class="currency-icon coin1">
          <span class="icon-text">银</span>
        </div>
        <span class="currency-value">{{ coin }}</span>
      </div>
      <div class="currency-item">
        <div class="currency-icon coin2">
          <span class="icon-text">金</span>
        </div>
        <span class="currency-value">{{ goldCoin }}</span>
      </div>
    </div>
    <div class="user-level">
      <span class="level-text">Lv.{{ level }}</span>
      <span class="realm-text">{{ realmName || '初学乍练' }}</span>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import UserAvatar from './UserAvatar.vue'

export default {
  name: 'UserInfoBar',
  components: { UserAvatar },
  computed: {
    ...mapGetters({
      nickname: 'user/nickname',
      sectInfo: 'user/sectInfo',
      level: 'user/level',
      realmName: 'user/realmName',
      coin: 'items/coin',
      goldCoin: 'items/goldCoin'
    }),
    sectName() {
      return (this.sectInfo && this.sectInfo.sectName) || '无门派'
    }
  }
}
</script>

<style scoped>
/* ========== 武侠风格用户信息栏 ========== */
.user-info-bar {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.98);
  border: 2px solid #c4a57b;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 4px 12px rgba(139, 111, 71, 0.25);
  box-sizing: border-box;
  font-family: "STSong", "Noto Serif SC", serif;
  transition: all 0.3s ease;
}

.user-info-bar:hover {
  box-shadow: 0 5px 15px rgba(139, 111, 71, 0.35);
  transform: translateY(-1px);
}

.user-details { flex: 1; }

.user-name { 
  font-size: 16px; 
  font-weight: 700; 
  color: #4a3c2a; 
  display: block; 
  margin-bottom: 5px; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap;
  letter-spacing: 0.5px;
}

.user-sect { 
  font-size: 13px; 
  color: #8b6f47; 
  font-weight: 600;
  display: block; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap;
}

.currency-display { 
  display: flex; 
  flex-direction: column; 
  gap: 8px; 
  margin: 0 12px; 
}

.currency-item { 
  display: flex; 
  align-items: center; 
  gap: 6px; 
  background: rgba(139, 111, 71, 0.06);
  padding: 4px 8px;
  border-radius: 12px;
  border: 1px solid #d8c7a3;
  transition: all 0.3s ease;
}

.currency-item:hover {
  background: rgba(139, 111, 71, 0.1);
}

.currency-icon { 
  width: 24px; 
  height: 24px; 
  border-radius: 50%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 11px; 
  font-weight: bold; 
  border: 2px solid;
}

.currency-icon.coin1 { 
  background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 100%); 
  color: #333;
  border-color: #9a9a9a;
  box-shadow: 0 2px 6px rgba(192, 192, 192, 0.3); 
}

.currency-icon.coin2 { 
  background: linear-gradient(135deg, #d4af37 0%, #ffd700 100%); 
  color: #6b4f3b;
  border-color: #b8951f;
  box-shadow: 0 2px 6px rgba(212, 175, 55, 0.3); 
}

.currency-value { 
  font-size: 13px; 
  font-weight: 700; 
  color: #4a3c2a; 
  min-width: 40px; 
}

.user-level { text-align: right; }

.level-text { 
  font-size: 16px; 
  font-weight: 700; 
  color: #4a3c2a; 
  display: block; 
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}

.realm-text { 
  font-size: 12px; 
  color: #8b6f47; 
  font-weight: 600;
  display: block; 
}

@media (max-width: 480px) {
  .user-info-bar { padding: 12px; margin-bottom: 10px; border-radius: 10px; }
  .user-name { font-size: 15px; margin-bottom: 3px; }
  .user-sect { font-size: 12px; }
  .currency-icon { width: 22px; height: 22px; font-size: 10px; }
  .currency-value { font-size: 12px; }
}

@media (max-width: 320px) {
  .user-info-bar { padding: 10px; margin-bottom: 8px; }
  .user-name { font-size: 14px; margin-bottom: 2px; }
  .user-sect { font-size: 11px; }
  .currency-icon { width: 20px; height: 20px; }
}
</style>